<template>
  <div class="table-preview-container w-full h-auto" :class="{
    'cursor-pointer': edit ?? true,
    'preview-block-active': (edit ?? true) && isActive
  }" :style="{ background: props.table.bgColor }" @click="handlePreviewClick">
    <section class="relative max-w-[1200px] mx-auto py-[16px] px-[32px]">
      <div class="table-wrapper">
        <CustomTable :table-config="props.table.tableConfig" :read-only="true" />
      </div>
    </section>
  </div>
</template>
<script setup lang="ts">
import type { TableState } from './table-module.vue'
import CustomTable from '#/components/custom-table.vue'

const emit = defineEmits<{
  (e: 'click'): void;
}>()

const props = defineProps<{
  table: TableState;
  edit?: boolean;
  isActive?: boolean;
}>()

// 预览区块点击事件处理
const handlePreviewClick = (event: Event) => {
  // 只在编辑模式下处理点击事件
  if (props.edit ?? true) {
    event.stopPropagation()
    emit('click')
  }
}
</script>

<style lang="scss" scoped>
.table-preview-container {
  /* 确保容器有稳定的布局 */
  position: relative;
  overflow: hidden;

  .table-wrapper {
    /* 为表格提供稳定的容器 */
    width: 100%;
    min-height: 20px;
    position: relative;

    /* 确保表格在预览模式下正确显示 */
    :deep(.handsontable) {
      width: 100% !important;

      /* 防止表格在预览模式下出现布局问题 */
      .wtHolder {
        width: 100% !important;
      }

      .wtHider {
        width: 100% !important;
      }

      /* 确保表格单元格在预览模式下正确显示 */
      .htCore {
        width: 100% !important;
      }
    }
  }
}

/* 预览区块激活状态样式 */
.preview-block-active {
  border: 1px dashed #000000;
  transition: border 0.3s ease;
}
</style>
